<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>04-08</title>
  <link rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <style>
      .layout1 { margin:30px 30px 30px 30px; }
  </style>
  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="example" class="container layout1">
    <p><input type="text" v-model="amount" class="form-control" /></p>
    <p>
        <button id="create" v-on:click.once="specialEvent"
           class="btn btn-primary">계좌 개설 10000원 이벤트</button>
        <button id="deposit" v-on:click="deposit($event)" 
            class="btn btn-primary">예금</button>
        <button id="withdraw" v-on:click="withdraw" 
            class="btn btn-primary">인출</button>
    </p>            
    <h3>계좌 잔고 : {{balance}}</h3>
</div>
<script type="text/javascript">
var vm = new Vue({
  el : "#example",
  data : {
    amount : 0,
    balance : 0,
  },
  methods : {
    specialEvent : function(e) {
        this.balance += 10000;
    },
    deposit : function(e) {
        var amt = parseInt(this.amount);
        if (amt <= 0) {
            alert("0보다 큰 값을 예금해야 합니다");
        } else {
            this.balance += amt;
        }
    }, 
    withdraw : function(e) {
        var amt = parseInt(this.amount);
        if (amt <= 0) {
            alert("0보다 큰 값을 인출할 수 있습니다");
        } else if (amt > this.balance) {
            alert("잔고보다 많은 금액을 인출할 수 없습니다");
        } else {
            this.balance -= amt;
        }
    }
  }
})
</script>
</body>
</html>